<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>编辑商品</title>
    <style type="text/css">
		.checkbox{
			 margin-left:5px;
			 width:90px;
			 margin-top: 10px;
		}
		textarea{
			width: 300px;
			height: 100px;
		}
    </style>
    <link rel="stylesheet" type="text/css" href="__STATIC__/Admin/hdjs/hdjs.css"/>
    <script src="__STATIC__/Admin/js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
    <!--百度编辑器-->
    <script type="text/javascript" charset="utf-8" src="__STATIC__/Admin/ueditor1_4_3/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="__STATIC__/Admin/ueditor1_4_3/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="__STATIC__/Admin/ueditor1_4_3/lang/zh-cn/zh-cn.js"></script>   
    <!--上传插件-->
	<script type="text/javascript" charset="utf-8" src="__STATIC__/Admin/uploadify/jquery.uploadify.min.js" ></script>
	<link href="__STATIC__/Admin/uploadify/uploadify.css" type="text/css" rel="stylesheet">

    <script type="text/javascript">
    		
			//异步获取商品属性和规格
    		function getSpecAttr(category_cid){
    			//通过cid找到相对应的类型属性
    			$.ajax({
					type:"post",
					url:"{|U:'getTypeAttr'}",
					data:{cid : category_cid},
					dataType:'json',
					success:function(phpData){
						//定义规格和属性字符串
						var attr = '';
						var spec = '';
						//循环json组合字符串	
						$.each(phpData, function(k,v) {
							//如果是属性的时候
							if(v.at_type == 0){
						  		 attr += '<tr style="color:red">' + 
			            			'<th class="w100">'+v.atname+'</th>' + 
			            			'<th>' + 
				            			'<select name="attr['+v.atid+']">' + 
				            				'<option value="">------请选择------</option>';
				            				var option = '';
				            				$.each(v.at_value, function(kk,vv) {    
				            					 option += '<option value="'+vv+'">'+vv+'</option>';                                                       
				            				});
				            			attr += option;
				            			attr += '</select>' + 
			            			'</th>' + 
			            			'<th></th>' + 
			            		'</tr>';  
							}else{
								//如果是规格的时候
							  	spec += '<tr style="color: blue;">' + 
				            		'<th class="w100">'+v.atname+'</th>' + 
				            		'<th width="50">' + 
				            			'<select name="spec['+v.atid+'][value][]">' + 
				            				'<option value="">------请选择------</option>';
				            				var option = '';
				            				$.each(v.at_value, function(kk,vv) {    
				            					 option += '<option value="'+vv+'">'+vv+'</option>';                                                       
				            				});
				            				//连接option
				            				spec += option;
					            			spec += '</select>' + 
								            		'</th>' + 
								            		'<th>附加价格 ' +
								            			'<input type="text" name="spec['+v.atid+'][price][]" id="" value=""/>' + 
								            			' <a href="javascript:;" class="hd-btn hd-btn-primary add-spec">添加规格</a>' + 
								            		'</th>' + 
								            '</tr>';
							}
						});
						//插入到属性的表格中
						$('#attr').html(attr);
						$('#spec').html(spec);
					}
				});
    		}
    	$(function(){		
			//旧的cid
			var oldCid = {$oldData.category_cid};
			var oldAttr ='{$selected}';

			var oldAttr ='{$selected.attr}';
			var oldSpec = '{$selected.spec}';
			//插入到属性的表格中
			$('#attr').html(oldAttr);
			$('#spec').html(oldSpec);
			//选择分类切换动作
			$('select[name=category_cid]').change(function(){
				//获得选择分类的cid
				var category_cid = $(this).val();
				if(category_cid == oldCid){
					//插入到属性的表格中
					$('#attr').html(oldAttr);
					$('#spec').html(oldSpec);
				}else{
					//调用函数，函数在上面
					getSpecAttr(category_cid);
				}
			})
    			
			//点击添加规格，规格会多一个
			$('.add-spec').live('click',function(){
				var tr = $(this).parents('tr');
				//克隆一个父级tr
				var cloneTr = tr.clone();
				cloneTr.find('a').html('删除规格').removeClass('hd-btn-primary').removeClass('add-spec').addClass('hd-btn-danger remove-spec');
				//插入到当前tr的下一行
				tr.after(cloneTr);
			})
			
			//点击删除规格
			$('.remove-spec').live('click',function(){
				$(this).parents('tr').remove();
			})
			
			//表单提交，把规格和属性放到隐藏域
			$('#shopForm').submit(function(){
				//抓到规格和属性的内容
				var attr = $('#attr').html();
				var spec = $('#spec').html();
				//存到隐藏域，为了提交给php
				var hidden = "<input type='hidden' name='selected[attr]' value='"+attr+"'/>";
				hidden += "<input type='hidden' name='selected[spec]' value='"+spec+"'/>";
				$(this).append(hidden);
			})
				
			//让选中规格和属性都有selected属性
			$('select').live('change',function(){
				//让当前表单选中的option加一个selected,让其他的兄弟元素清除selected
				$(this).find('option:selected').attr('selected',true).siblings().removeAttr('selected');
			})
			
			//点击x 删除列表图片
    		$('.close').click(function(){
    			//父级td
    			var box = $(this).parents('p');
    			//获得完整路径
    			var path = $(this).attr('path');
    			//获得对应的gid
    			var gid = $(this).attr('gid');
    			$.ajax({
    				type:"post",
    				url:"{|U:'delImg'}",
    				data:{path : path,gid : gid},
    				success:function(){
    					box.remove();
    				}
    			});
    		})
			
			
			//点击x 删除图册图片
    		$('.delPic').click(function(){
    			//父级td
    			var box = $(this).parents('p');
    			//获得完整路径
    			var path = $(this).attr('path');
    			$.ajax({
    				type:"post",
    				url:"{|U:'delPic'}",
    				data:{path : path},
    				success:function(){
    					box.remove();
    				}
    			});
    		})
			
    	})
    </script>
</head>
<body>
<div class="wrap">
    <div class="hd-title-header">编辑商品</div>
    <form action="" method="post" class="form-inline hd-form" enctype="multipart/form-data" id="shopForm">
        <table class="hd-table hd-table-list">
            <tr>
                <th class="w100">所属分类</th>
                <td>
                    <select name="category_cid" class="w200">
                    	<option value="">------请选择分类------</option>
                    	<foreach from="$cateData" key="$k" value="$v">
                    		<option value="{$v.cid}" <if value="$oldData['category_cid']==$v['cid']">selected</if> >{$v._name}</option>
                    	</foreach>
                    </select>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">所属品牌</th>
                <td>
                    <select name="brand_bid" class="w200">
                    	<option value="">------请选择品牌------</option>
                    	<foreach from="$brandData" key="$k" value="$v">
                    		<option value="{$v.bid}" <if value="$oldData['brand_bid']==$v['bid']">selected</if>>{$v.bname}</option>
                    	</foreach>
                    </select>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">商品名称</th>
                <td>
                    <input type="text" name="gname" id="" value="{$oldData.gname}"/>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">单位</th>
                <td>
                    <input type="text" name="unit" id="" value="{$oldData.unit}"/>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">市场价</th>
                <td>
                    <input type="text" name="marketprice" id="" value="{$oldData.marketprice}"/>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">商城价</th>
                <td>
                    <input type="text" name="shopprice" id="" value="{$oldData.shopprice}"/>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">点击次数</th>
                <td>
                    <input type="text" name="click" id="" value="{$oldData.click}"/>
                </td>
                <td></td>
            </tr>
             </table>
        
        <table class="hd-table hd-table-list">
            <tr>
                <th class="w100"><a href="javascript:;" class="hd-btn hd-btn-success hd-btn-sm">商品属性</a></th>
                <td class="w100">
                </td>
                <td></td>
            </tr>
        </table>
        <!--商品属性的字符串要插入到这个表格中-->  
        <table id="attr" class="hd-table hd-table-list">
           
        </table>
        
        
        <table class="hd-table hd-table-list">
            <tr>
                <th class="w100"><a href="javascript:;" class="hd-btn hd-btn-success hd-btn-sm">商品规格</a></th>
                <td class="w100">
                </td>
                <td></td>
            </tr>
        </table>
        <!--把循环好的规格放到这个表格中-->
        <table id="spec" class="hd-table hd-table-list">
            
        </table>
        
        
        <table class="hd-table hd-table-list">
            <tr>
                <th class="w100"><a href="javascript:;" class="hd-btn hd-btn-success hd-btn-sm">列表图</a></th>
                <td class="w100"></td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">上传图片</th>
                	<td id="listimg" >
                		<if value="$oldData['img']">
		                	<p>
			                	<img style="width: 80px;height: 80px;" src="__ROOT__/{$oldData.img}"/>
			                	<a href='javascript:;' style='color: red;' class='del-img close' gid="{$oldData.gid}" path="{$oldData.img}">X</a>
			                	<input type="hidden" name="img" value="{$oldData.img}" />
		                	</p>
	                	</if>
						<div lab="uploadFile"  >
	            			<input id="listpic" type="file" multiple="true">
	            			<span>类型: *.jpg,*.png 大小: 2000KB 数量: 1</span>
	            			<script type="text/javascript">
	                		$(function(){
	                    		$('#listpic').uploadify({
		                        	'formData': {//POST数据
		                            	'<?php echo session_name();?>' : '<?php echo session_id();?>',
		                        	},
			                        'fileTypeDesc' : '上传文件',//上传描述
			                        'fileTypeExts' : '*.jpg;*.png',
			                        'swf'      : '__STATIC__/Admin/uploadify/uploadify.swf',
			                        'uploader' : '{|U:"uploadList"}',//上传操作方法
			                        'buttonText':'选择文件',
			                        'fileSizeLimit' : '2000KB',
			                        'uploadLimit' : 100,//上传文件数
			                        'width':65,
			                        'height':25,
			                        'successTimeout':10,//等待服务器响应时间
			                        'removeTimeout' : 0.2,//成功显示时间
			                        'onUploadSuccess' : function(file, data, response) {
			                            data=$.parseJSON(data);
			                            var imageUrl = data.image?data.url:'__STATIC__/Admin/image/default.png';
			                            var li="<li path='"+data.path+"' url='"+data.url+"'><img src='"+imageUrl+"' class='hd-w80 hd-h70'/><a href='javascript:;' style='color: red;' class='del-img'>X</a><input type='hidden' name='img' value='"+data.path+"'/></li>";
			                            $("#uploadList ul").prepend(li);
	                        		}
	                    		});
	                		});
	            			</script>
				            <div id="uploadList">
				                <ul>
				 
				                </ul>
				            </div>
		        		</div>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100"><a href="javascript:;" class="hd-btn hd-btn-success hd-btn-sm">商品图册</a></th>
                <td class="w100"></td>
                <td></td>
            </tr>
            <tr>
                <th class="w100">上传图片</th>
                <td>
                	<if value="$oldData['img']">
                		<foreach from="$DetData[good_pic]" key="$k" value="$v">
                			<p>
			                	<img style="width: 80px;height: 80px;" src="__ROOT__/{$v}"/>
			                	<a href='javascript:;' style='color: red;' class='del-img delPic' path="{$v}">X</a>
			                	<input type="hidden" name="good_pic[]" value='{$v}'/>
		                	</p>
	                	</foreach>
	                </if>
						<div lab="uploadFile">
	            			<input id="pic" type="file" multiple="true">
	            			<span>类型: *.jpg,*.png 大小: 2000KB 数量: 10</span>
	            			<script type="text/javascript">
	                		$(function() {
	                    		$('#pic').uploadify({
	                        		'formData': {//POST数据
	                            	'<?php echo session_name();?>' : '<?php echo session_id();?>',
                        			},
			                        'fileTypeDesc' : '上传文件',//上传描述
			                        'fileTypeExts' : '*.jpg;*.png',
			                        'swf'      : '__STATIC__/Admin/uploadify/uploadify.swf',
			                        'uploader' : '{|U:"uploadPic"}',//上传操作方法
			                        'buttonText':'选择文件',
			                        'fileSizeLimit' : '2000KB',
			                        'uploadLimit' : 100,//上传文件数
			                        'width':65,
			                        'height':25,
			                        'successTimeout':10,//等待服务器响应时间
			                        'removeTimeout' : 0.2,//成功显示时间
			                        'onUploadSuccess' : function(file, data, response) {
			                            data=$.parseJSON(data);
			                            var imageUrl = data.image?data.url:'__STATIC__/Admin/image/default.png';
			                            var li="<li path='"+data.path+"' url='"+data.url+"'><img src='"+imageUrl+"' class='hd-w80 hd-h70'/><a href='javascript:;' style='color: red;' class='del-img'>X</a><input type='hidden' name='good_pic[]' value='"+data.path+"'/></li>";
			                            $("#picList ul").prepend(li);
			                        }
	                    		});
	                		});
		            		</script>
				            <div id="picList">
				                <ul>
				                	
				                </ul>
				            </div>
				        </div> 
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100"><a href="javascript:;" class="hd-btn hd-btn-success hd-btn-sm">商品详细</a></th>
                <td class="w100"></td>
                <td></td>
            </tr>
             <tr>
                <th class="w100">商品详细</th>
                <td>
                    <script id="ed_intro" type="text/plain" style="width:600px;height:500px;" name="intro">{$DetData.intro}</script>
                    <script>
	        				var ue = UE.getEditor('ed_intro');
	   				</script>
                </td>
                <td></td>
            </tr>
            <tr>
                <th class="w100"><a href="javascript:;" class="hd-btn hd-btn-success hd-btn-sm">售后服务</a></th>
                <td class="w100"></td>
                <td></td>
            </tr>
             <tr>
                <th class="w100">售后服务</th>
                <td>
                    <script id="ed_serv" type="text/plain" style="width:600px;height:500px;" name="service">{$DetData.service}</script>
                    <script>
	        				var ue = UE.getEditor('ed_serv');
	   				</script>
                </td>
                <td></td>
            </tr>
        
        </table>
        <div class="position-bottom">
        	<!--有gid就是修改，没有就是添加(隐藏域的作用)-->
        	<input type="hidden" name="gid" value="{$hd.get.gid}"/>
            <input type="submit" class="hd-btn hd-btn-primary hd-btn-sm" value="修改"/>
        </div>
    </form>
</div>
</body>
</html>